<template>
  <div class="condition-set-container">
    <ul class="condition-set-top scroll-box">
      <li>
        <p class="tag-name">设备类型</p>
        <div
          class="tag-content"
          @click="chooseCondition(1)"
        >
          <span
            class="color-black"
            v-if="typeName"
          >{{ typeName }}</span>
          <span
            class="color-gray"
            v-else
          >请选择</span>
          <van-icon name="arrow" />
        </div>
      </li>
      <li>
        <p class="tag-name">物模型</p>
        <div
          class="tag-content"
          @click="chooseCondition(2)"
        >
          <span
            class="color-black"
            v-if="modelName"
          >{{ modelName }}</span>
          <span
            class="color-gray"
            v-else
          >请选择</span>
          <van-icon name="arrow" />
        </div>
      </li>
      <li>
        <p class="tag-name required">选择设备</p>
        <div
          class="tag-content"
          @click="chooseCondition(3)"
        >
          <span
            class="color-black"
            v-if="deviceName"
          >{{ deviceName }}</span>
          <span
            class="color-gray"
            v-else
          >请选择</span>
          <van-icon name="arrow" />
        </div>
      </li>
    </ul>

    <div class="submit-box border-top">
      <van-button
        type="primary"
        block
        @click="cancelCondition"
        class="cancel-btn"
      >取 消</van-button>
      <van-button
        type="primary"
        block
        @click="submitFn"
      >确 定</van-button>
    </div>

    <van-action-sheet
      v-model="showActionSheet"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      :description="description"
      @cancel="onCancel"
      @select="selectSheet"
    />
  </div>
</template>

<script>
import { Button, Icon, ActionSheet } from 'vant';
import { getModelGroupList, getModelList, getDeviceList, getModelVariable } from '@/api/historyData.js';

export default {
  name: 'ConditionSet',
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet
  },
  data() {
    return {
      showActionSheet: false,
      type: '',
      description: '',
      actions: [],
      typeName: '',
      typeValue: '',
      typeActions: [],
      modelName: '',
      modelValue: '',
      modelActions: [],
      deviceName: '',
      deviceValue: '',
      deviceNumber: '',
      deviceActions: []
    };
  },
  created() {
    this.getModelGroupList();
    this.getModelList();
    this.getDeviceList();
  },
  methods: {
    // 获取物模型分类列表
    getModelGroupList() {
      getModelGroupList().then(res => {
        if (res.data && res.data.length) {
          res.data.map(item => {
            this.typeActions.push({
              name: item.name,
              value: item.id
            });
          });
        }
      });
    },
    // 获取物模型列表
    getModelList() {
      getModelList({
        id: this.typeValue || 0
      }).then(res => {
        if (res.data && res.data.length) {
          res.data.map(item => {
            this.modelActions.push({
              name: item.name,
              value: item.id
            });
          });
        }
      });
    },
    // 获取设备列表
    getDeviceList() {
      getDeviceList({
        typeId: this.typeValue,
        modelId: this.modelValue
      }).then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            this.deviceActions.push({
              name: item.name,
              value: item.id,
              number: item.number,
              deviceModelId: item.modelId,
              deviceModelName: item.modelName
            });
          });
        }
      });
    },
    // 选择条件
    chooseCondition(type) {
      // type 1设备类型 2物模型 3选择设备
      let descriptionArr = ['设备类型', '物模型', '选择设备'];
      this.description = descriptionArr[type - 1];
      switch (type) {
        case 1:
          this.actions = this.typeActions;
          break;
        case 2:
          this.actions = this.modelActions;
          break;
        case 3:
          this.actions = this.deviceActions;
          break;
      }

      this.showActionSheet = true;
      this.type = type;
    },
    // 选择选项
    selectSheet(action, index) {
      // type 1设备类型 2物模型 3选择设备 4时间间隔
      console.log('action---', action);
      switch (this.type) {
        case 1:
          this.typeName = action.name;
          this.typeValue = action.value;
          break;
        case 2:
          this.modelName = action.name;
          this.modelValue = action.value;
          break;
        case 3:
          this.deviceName = action.name;
          this.deviceValue = action.value;
          this.deviceNumber = action.number;
          this.deviceModelId = action.deviceModelId;
          this.deviceModelName = action.deviceModelName;
          break;
      }
    },
    // 取消选项选择
    onCancel() {
      this.showActionSheet = false;
    },
    // 取消条件设置
    cancelCondition() {
      this.$emit('cancel');
    },
    // 确定所选条件
    submitFn() {
      if (!this.deviceName) {
        this.$toast('请选择设备');
        return;
      }
      let conditionData = {
        deviceName: this.deviceName,
        deviceValue: this.deviceValue,
        deviceNumber: this.deviceNumber,
        deviceModelId: this.deviceModelId,
        deviceModelName: this.deviceModelName
      };
      localStorage.setItem('dataAnalyseCondition', JSON.stringify(conditionData));
      this.$emit('submit', conditionData);
    }
  }
};
</script>

<style lang="scss" scoped>
.condition-set-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .condition-set-top {
    flex: 1;
    padding: 0 0.426667rem;

    li {
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);

      .tag-name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.426667rem;
        color: var(--color-deep-gray);
        font-size: 0.346667rem;

        &.required {
          position: relative;
          padding-left: 0.16rem;

          &::before {
            content: '*';
            position: absolute;
            left: 0;
            color: #f56c6c;
          }
        }

        span {
          &:last-of-type {
            i {
              font-size: 0.373333rem;
              font-style: normal;
            }
          }
        }
      }
      .tag-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.373333rem;

        .van-icon {
          color: #ccc;
        }
      }
    }
  }

  .submit-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 1.493333rem;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;

    .van-button {
      width: 4.32rem;
      padding: 0;
      color: #fff;
      border-radius: 0.08rem;
      border-color: var(--color-primary);
      background-color: var(--color-primary);

      &.cancel-btn {
        color: var(--color-deep-gray);
        background-color: #fff;
        border: 1px solid var(--border-color);
      }
    }
  }
}
</style>